<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
      /* 上传按钮的样式 */
      .picture {
        width: 556px;
        height: 276px;
        border: 1px solid #ddd;
        border-radius: 6px;
        /* 设置行高和高度相同，文字图标就上下居中了*/
        line-height: 276px;
        text-align: center;
        /* 设置overflow: hidden; 上载图标超出边界就不显示了 */
        overflow: hidden;
      }
      /* 上传按钮的图标样式 */
      .picture-icon {
        /* 设置大一些的图标，看着醒目 */
        font-size: 38px;
      }
    </style>
</head>
<body>
    <div id="app">
      <h1>ajax上传图片</h1>
      <el-form label-width="100">
        <el-form-item label="上传图片">
          <el-upload
                  action="/api/upload/images"
                  name="imageFile"
                  class="picture"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :before-upload="beforeImageUpload">
            <!-- 显示上传以后的图片 -->
            <img v-if="image" :src="image" class="product">
            <!-- 上传按钮，设置overflow: hidden; 超出边界就不显示了 -->
            <i class="el-icon-plus picture-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.staticfile.org/axios/0.21.4/axios.min.js"></script>
    <script type="text/javascript">
      var vue = new Vue({
        el: "#app",
        data: function (){
          return {
            // 上传成功后返回的图片地址
            image: ''
          }
        },
        methods: {
          handleSuccess(res, file) {
            console.log("上传成功");
            // 上传成功后将返回的图片地址赋值给image，然后在页面上显示图片
            this.image = res;
            console.log(res);
            console.log(file);
          },
          beforeImageUpload(file) {
            console.log("上传前");
            console.log(file);
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG && !isPNG) {
              this.$message.error('上传图片只能是 JPG 或 PNG 格式');
            }
            if (!isLt2M) {
              this.$message.error('上传图片大小不能超过 2MB');
            }
            return (isJPG || isPNG) && isLt2M;
          }
        }
      })
    </script>
</body>
</html>